<template>
	<view class="acc_withdrawal_container">
		<view class="acc_withdrawal_box" v-if="accList.length !== 0">
			<view class="acc_withdrawal_all" v-for="(item, index) in accList" :key="index">
				<view class="top_box">
					<view class="acc_title">
						佣金提现
					</view>
					<view class="acc_price" style="font-family: my-font;">
						- {{ item.amount }}
					</view>
				</view>

				<view class="middle_box" style="padding-bottom: 10rpx;">
					<view class="acc_title">
						提现方式
					</view>
					<view class="acc_price">
						{{item.type == 1 ? '支付宝' : '银行卡'}}
					</view>
				</view>

				<view class="middle_box" style="padding-bottom: 10rpx;">
					<view class="acc_title">
						提现账号
					</view>
					<view class="acc_price" v-if="item.type == 1">
						{{item.type == 1 && item.alipay ? (item.alipay).replace(item.alipay.substring(3,9),'****') : ''}}
					</view>
					<view class="acc_price" v-else-if="item.type == 2">
						{{ item.bankcard ? (item.bankcard).replace(item.bankcard.substring(3,15),'****') :''}}
					</view>
				</view>

				<view class="middle_box">
					<view class="acc_title">
						提现名称
					</view>
					<view class="acc_price" v-if="item.type == 1">
						{{item.alipay_name ?  (item.alipay_name).replace(item.alipay_name.substring(1),'**') : ''}}
					</view>
					<view class="acc_price" v-else-if="item.type == 2">
						{{item.username ?  (item.username).replace(item.username.substring(1),'**') : ''}}
					</view>
				</view>

				<view class="top_box" v-if="item.errmsg">
					<view class="acc_title">
						失败原因
					</view>
					<view class="acc_error_title">
						{{ item.errmsg }}
					</view>
				</view>

				<view class="bottom_box">
					<view class="acc_date" v-if="item.created_at">
						日期: <span style="font-family: my-font;">{{ item.created_at }}</span>
					</view>
					<!-- 0 待审核;1审核成功;2审核失败 -->
					<view class="acc_status" v-if="item.status == 0">待审核</view>
					<view class="acc_status" v-else-if="item.status == 1" style="color: #409eff;">审核成功</view>
					<view class="acc_status" v-else-if="item.status == 2" style="color: #e6a23c;">审核失败</view>
					<view class="acc_status" v-else-if="item.status == 3" style="color: firebrick;">打款中</view>
				</view>

				<view class="reset_box" v-if="item.status == 2">
					<view class="reset_all" @click="resetRealName(item)">
						申请重置实名
					</view>
				</view>
			</view>
		</view>

		<!-- 没有订单 -->
		<view class="kickback_record_no_box" v-else>
			您还没有提现记录，快去提现吧~
		</view>

		<!-- 重置实名弹窗 -->
		<u-popup v-model="showResetRealName" mode="center" border-radius="12" width="650">
			<view class="reset_popup_box">
				<view class="reset_title">
					是否确定提交申请重置实名？
				</view>
				<view class="reset_btn_box">
					<view class="reset_cancel_btn" @click="handleCancelReset">
						取消
					</view>
					<view class="reset_sure_btn" @click="handleSureReset">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accList: [],
				pageObj: {
					pageNow: 1,
					pageSize: 10
				},
				total: 0,
				showResetRealName: false,
				resetId: ''
			}
		},
		onShow() {
			if (this.pageObj.pageNow == this.total) {
				return
			} else {
				this.getIncomeRecords()
			}
		},
		onReachBottom() {
			if (this.pageObj.pageNow < this.total) {
				this.pageObj.pageNow++
				this.getIncomeRecords()
			} else if (this.pageObj.pageNow == this.total) {
				uni.showToast({
					title: '暂无更多数据',
					icon: 'none'
				})
				return
			}
		},
		methods: {
			// 获取提现记录
			getIncomeRecords() {
				this.$request('/api/getGetpayList', {
					// id: uni.getStorageSync('userInfo').id
					agent_level: '0',
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize
				}, 'GET').then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.accList.push(item)
						})

						this.total = res.page_info.page_count
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 申请重置实名接口
			submitResetRealname(val) {
				this.$request('/api/submitResetRealname', {
					getpay_id: this.resetId
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						this.showResetRealName = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 重置实名
			resetRealName(val) {
				this.resetId = val.id
				this.showResetRealName = true
			},

			// 重置实名弹窗确定
			handleSureReset() {
				this.submitResetRealname()
			},

			// 重置实名弹窗取消
			handleCancelReset() {
				this.showResetRealName = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.acc_withdrawal_container {
		padding: 16rpx 20rpx 0;

		.acc_withdrawal_box {

			.acc_withdrawal_all {
				background: #FFFFFF;
				box-shadow: 0px 5px 4px 0px #F4F4F4;
				border-radius: 12px;
				margin-bottom: 16rpx;
				padding: 30rpx 40rpx 30rpx 44rpx;

				.top_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 12rpx;

					.acc_title {
						font-family: all-font;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					.acc_error_title {
						font-family: all-font;
						color: orangered;
					}

					.acc_price {
						font-family: my-font;
						font-weight: 400;
						font-size: 35rpx;
						color: #FF1B1B;
					}
				}

				.middle_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// padding-bottom: 12rpx;

					.acc_title {
						font-family: all-font;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.acc_price {
						font-family: all-font;
						font-weight: 400;
						font-size: 28rpx;
						color: #409EFF;
					}
				}

				.bottom_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 24rpx;

					.acc_date {
						font-family: all-font;
						font-weight: bold;
						font-size: 26rpx;
						color: #B3B3B3;
					}

					.acc_status {
						font-size: 26rpx;
						font-family: all-font;
						font-weight: 400;
						color: #FF4242;
					}
				}

				.reset_box {
					display: flex;
					justify-content: flex-end;
					padding-top: 10rpx;

					.reset_all {
						background: #0E255B;
						border-radius: 16rpx;
						border: 1px solid #EBEBEB;
						font-family: all-font;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFD79A;
						padding: 6rpx 10rpx;
					}
				}
			}
		}


		.kickback_record_no_box {
			font-size: 40rpx;
			font-family: all-font;
			color: #ccc;
			text-align: center;
			padding-top: 30rpx;
		}

		.reset_popup_box {
			font-family: all-font;
			padding: 50rpx 30rpx;

			.reset_title {
				font-size: 30rpx;
				text-align: center;
				padding-bottom: 40rpx;
			}

			.reset_btn_box {
				display: flex;

				.reset_cancel_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 333rpx;
					height: 79rpx;
					background: #FFFFFF;
					border-radius: 14rpx 0px 0px 14rpx;
					border: 1px solid #0E255B;
					font-weight: 500;
					font-size: 30rpx;
					color: #0E255B;
				}

				.reset_sure_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 333rpx;
					height: 79rpx;
					background: #0E255B;
					border-radius: 0px 14rpx 14rpx 0px;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFD79A;
				}
			}
		}
	}
</style>